<script setup lang="ts">
import {useRouter, useRoute} from "vue-router";
import CdlDescriptions from "@/components/descriptions";
import {DescriptionsTree} from "@/interfaces/components/Descriptions";
import {Task, Vehicle, WayBill} from "@/interfaces/views/task/task";
import {ref} from "vue";
import CdlTable from "@/components/table";
import {TableTree} from "@/interfaces/components/Table";
import {Appeal} from "@/interfaces/views/task/appeal";
import {useAppealInfoApi} from "@/api/project/appeal";

const router = useRouter()
const route = useRoute()
if(route.query.id) init()

const taskDescriptionsTree: DescriptionsTree<Appeal> = [
  {label: "任务名称", prop: "taskName"},
  {label: "任务ID", prop: "id"},
  {label: "开始日期", prop: "ptStartTime"},
  {label: "结束日期", prop: "ptStartTime"},
]
const taskTableTree: TableTree<Vehicle> = {
  colRule: [
    {ti: "关联车辆", prop: "car"},
    {ti: "关联司机", prop: "driverName"},
    {ti: "司机手机号", prop: "phone"},
    {ti: "趟次额度", prop: "trip"},
    {ti: "是否是队长", prop: "captain", dict: "overall_yes_or_no"},
  ]
}
const appealDescriptionsTree: DescriptionsTree<Appeal> = [
  {label: "申诉司机", prop: "name"},
  {label: "申诉时间", prop: "createTime"},
  {label: "运单开始时间", prop: "pwStartTime"},
  {label: "运单结束时间", prop: "pwEndTime"},
  {label: "申诉原因", prop: "info"},
  {label: "申诉图片", prop: "img"},
]
const handleTableTree: DescriptionsTree<Appeal> = [
    {label: "处理人", prop: "operator"},
    {label: "处理时间", prop: "disposeTime"},
    {label: "处理意见", prop: "opinion"},
    {label: "备注", prop: "remark"},
]

const baseData = ref({})
const carsData = ref([])



function init(){
  useAppealInfoApi(route.query.id as string | number).then(res =>{
    const {cars, ...rest} = res.data
    carsData.value = cars
    baseData.value = rest
  })
}

/**
 * 回退页面
 */
function fallbackPage(){
  router.back()
}
</script>

<template>
<el-card style="position:relative;">
  <button class="back_btn" @click="fallbackPage"></button>
  <div class="main_control">
    <el-button type="primary" v-auth="'project:appeal:analyse'">轨迹分析</el-button>
    <el-button type="primary" v-auth="'project:task:info'">查看任务详情</el-button>
    <el-button type="primary" v-auth="'project:appeal:update'">处理</el-button>
  </div>
  <h1 class="top_line">任务信息</h1>
  <el-divider></el-divider>
  <CdlDescriptions :model="baseData" :template-tree="taskDescriptionsTree" :column="4" border></CdlDescriptions>
  <CdlTable style="margin-top: 20px" :data="carsData" :template-tree="taskTableTree" border></CdlTable>
  <h1>申诉信息</h1>
  <el-divider></el-divider>
  <CdlDescriptions :model="baseData" :template-tree="appealDescriptionsTree"></CdlDescriptions>
  <h1>处理信息</h1>
  <el-divider></el-divider>
  <CdlDescriptions :model="baseData" :template-tree="handleTableTree"></CdlDescriptions>
</el-card>
</template>
